<template>
  <!-- 菜单栏容器
            屏幕宽度大于等于1009时显示
         -->
  <div class="navWrp" v-if="$store.state.screenWidth >= 1009">
    <!-- 菜单列表 -->
    <div class="navList">
      <!-- 当滚轮到底部的距离为0时使用navItemStyle[0]样式
                否则使用navItemStyle[1]样式
             -->
      <div
        :class="$store.state.scrollTop == 0 ? navItemStyle[0] : navItemStyle[1]"
        @click="goUpVip"
      >
        会员中心
      </div>
      <div
        :class="$store.state.scrollTop == 0 ? navItemStyle[0] : navItemStyle[1]"
        @click="goNoteLibrary"
      >
        优质笔记
      </div>
      <div
        :class="$store.state.scrollTop == 0 ? navItemStyle[0] : navItemStyle[1]"
        @click="goHighlights"
      >
        版本亮点
      </div>
      <div
        :class="$store.state.scrollTop == 0 ? navItemStyle[0] : navItemStyle[1]"
        @click="goHelp"
      >
        帮助中心
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Nav",
  data() {
    return {
      // 两种菜单风格
      navItemStyle: ["navItem", "navItem1"],
    };
  },
  methods: {
    // 去会员中心页
    goUpVip() {
      // 如果当前路由不为upvip
      if (window.location.hash != "#/upvip") {
        // 跳转到upvip
        this.$router.push("/upvip");
      } else {
        // 刷新当前页面
        this.$router.go(0);
      }
    },
    // 去优质笔记页
    goNoteLibrary() {
      // 如果当前路由不为notelibrary
      if (window.location.hash != "#/notelibrary") {
        // 跳转到notelibrary
        this.$router.push("/notelibrary");
      } else {
        // 刷新当前页面
        this.$router.go(0);
      }
    },
    // 去版本亮点页
    goHighlights() {
      // 如果当前路由不为highlights
      if (window.location.hash != "#/highlights") {
        // 跳转到highlights
        this.$router.push("/highlights");
      } else {
        // 刷新当前页面
        this.$router.go(0);
      }
    },
    // 去帮助中心页
    goHelp() {
      // 如果当前路由不为help
      if (window.location.hash != "#/help") {
        // 跳转到help
        this.$router.push("/help");
      } else {
        // 刷新当前页面
        this.$router.go(0);
      }
    },
  },
};
</script>

<style lang="less" scoped>
// 菜单容器
.navWrp {
  // 子元素垂直居中
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  // 菜单列表
  .navList {
    // 宽
    width: 100%;
    // 弹性盒
    display: flex;
    // 子元素垂直居中
    -webkit-box-align: center;
    align-items: center;
    // 第一种列表项风格
    .navItem {
      // 字体颜色
      color: #fff;
      // 右外边距
      margin-right: 50px;
      // 小手
      cursor: pointer;
      // 字体大小
      font-size: 16px;
      // 不换行
      white-space: nowrap;
    }
    // 鼠标移入列表项时
    .navItem:hover {
      // 字体颜色
      color: #f3f3f3;
    }
    // 第二种列表项风格
    .navItem1 {
      // 字体颜色
      color: #3c3c3c;
      // 右外边距
      margin-right: 50px;
      // 小手
      cursor: pointer;
      // 字体大小
      font-size: 16px;
      // 不换行
      white-space: nowrap;
    }
    // 鼠标移入列表项时
    .navItem1:hover {
      // 字体颜色
      color: #0182c7;
    }
  }
}
</style>